<template>
  <div class='openapp' v-show='close'>
    <div class='close' @click="closefn"></div>
    <div class='logo'></div>
    <div class='txt'>
      <div>游侠客-让旅游充满想象</div>
      <div>户外、摄影、亲子、深度人文</div>
    </div>
    <div class="app" @click='downloadFun' >
      打开APP
      <div class="line"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'OpenApp',
  data () {
    return {
      close: true
    }
  },
  methods: {
    closefn () {
      this.close = false
    },
    downloadFun () {
      this.$router.push({
        path: '/appdownload'
      })
    }
  }
}
</script>
<style scoped lang="less">
@openAppbg:url(/static/Home/openAppbg.png);
@openAppclose:url(/static/Home/openAppclose.png);
@openApplogo:url(/static/Home/openApplogo.png);
.openapp{
  width: 100%;
  height: 80px;
  line-height:80px;
  background-image: @openAppbg;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  display: flex;
  justify-content: space-around;
  &>div{
    background-repeat: no-repeat;
    background-size: contain;
    background-position:center;
  }
  .close{
    width: 16px;
    height: 16px;
    margin:32px 0;
    background-image: @openAppclose;
  }
  .logo{
    width: 50px;
    background-image: @openApplogo;
  }
  .txt{
    height: 40px;
    margin:20px 0;
    text-align: left;
    color:#fff;
    &>div{
      height: 20px;
      line-height:20px
    }
    &>div:first-child{
      font-size:16px
    }
  }
  .app{
    font-size:16px;
    border:1px solid #fff;
    height: 30px;
    line-height:30px;
    padding:0 10px;
    border-radius:5px;
    margin:24px 0;
  }
}
</style>
